<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">
				欢迎登录智通大宗商务
			</text>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="button-demo">
			<button class='bottom' type='primary' @click="getUserProfile">
				微信授权登录
			</button>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="button-demo">
			<button class='bottom' type='primary' @click="appWxlogin">
				微 信 登 录
			</button>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="button-demo">
			<u-form :model="model" :rules="rules" ref="uForm">
				<u-form-item label="帐号" prop="name">
					<u-input placeholder="请输入用户名" v-model="model.username" type="text"></u-input>
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u-input :password-icon="true" type="password" v-model="model.password"
						placeholder="请输入密码"></u-input>
				</u-form-item>
			</u-form>
			<button class='bottom' type='primary' @click="webLogin">
				立 即 登 录
			</button>
		</view>
		<!-- #endif -->

		<view class="link-demo">
			登录代表同意
			<text class="link" @click="toAgreement">用户协议、</text>
			<text class="link" @click="toPrivacy">隐私政策</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				model:{},
				rules:{}
			}
		},
		methods: {
			toAgreement() {
				uni.navigateTo({
					url:'../center/agreement'
				})
			},
			toPrivacy() {
				uni.navigateTo({
					url:'../center/privacy'
				})
			},
			appWxlogin() {
				uni.showToast({
					title:"登录成功",
					icon:"none"
				})
			},
			webLogin() {
				uni.showToast({
					title:"登录成功",
					icon:"none"
				})
			},
			getUserProfile(e) {
				uni.getUserProfile({
					desc: '用于完善用户资料',
					success: (res) => {
						this.userInfo = res.userInfo
						uni.reLaunch({
							url: 'wx?userInfo=' + JSON.stringify(this.userInfo)
						});
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.link {
		color: #516aa5;
	}
	
	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
		background-color: #516aa5;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 50rpx;
		font-weight: 700;
		color: $u-content-color;
	}

	.button-demo {
		margin-top: 80rpx;
	}

	.link-demo {
		margin-top: 40rpx;
	}
</style>
